<template>
  <div class="container">
    <div class="top">项目绩效</div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple" style>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>新签合同</span>
            </div>
            <template>
              <el-table :data="personalList.performance" style="width: 100%">
                <el-table-column prop="project" label="项目"></el-table-column>
                <el-table-column prop="head_user" label="负责人"></el-table-column>
                <el-table-column prop="number" label="个人所得绩效"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>当年到款</span>
            </div>
            <template>
              <el-table :data="personalList.achievement" style="width: 100%">
                <el-table-column prop="project" label="项目"></el-table-column>
                <el-table-column prop="head_user" label="负责人"></el-table-column>
                <el-table-column prop="number" label="个人所得绩效"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>论证编制</span>
            </div>
            <template>
              <el-table :data="personalList.argument" style="width: 100%">
                <el-table-column prop="project" label="项目"></el-table-column>
                <el-table-column prop="head_user" label="负责人"></el-table-column>
                <el-table-column prop="number" label="个人所得绩效"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <h3> 个人绩效 </h3>
    <el-row class="contain">
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="serviceList.activity" style="width: 100%">
            <el-table-column label="活动参展">
              <el-table-column prop="level" label="级别系数" width></el-table-column>
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('activity',[{'name':'级别系数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="serviceList.hangar">
            <el-table-column label="个人机库讲解">
              <el-table-column prop="level" label="角色排名指数" width></el-table-column>
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('hangar',[{'name':'角色排名指数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="serviceList.visual_design">
            <el-table-column label="视觉设计">
              <el-table-column prop="level" label="参与人数" width></el-table-column>
              <el-table-column prop="total_people" label="角色排名指数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('visual_design',[{'name':'角色排名指数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="serviceList.service">
            <el-table-column label="综合服务">
              <el-table-column prop="overall" label="综合评价得分" width></el-table-column>
              <el-table-column prop="intensity" label="工作强度" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('service',[{'name':'综合评价得分','value':'overall'},{'name':'工作强度','value':'intensity'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="contain">
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="researchList.paper" style="width: 100%">
            <el-table-column label="论文">
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
              <el-table-column prop="rank" label="角色排名指数" width></el-table-column>
              <el-table-column prop="partition" label="分区指数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('paper',[{'name':'参与人数','value':'total_people'},{'name':'角色排名指数','value':'rank'},{'name':'分区指数','value':'partition'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="researchList.patent">
            <el-table-column label="专利、软著">
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
              <el-table-column prop="rank" label="角色排名" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('patent',[{'name':'角色排名指数','value':'rank'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="researchList.award">
            <el-table-column label="奖项">
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
              <el-table-column prop="rank" label="角色排名" width></el-table-column>
              <el-table-column prop="level" label="级别指数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('award',[{'name':'角色排名指数','value':'rank'},{'name':'级别指数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-table :data="researchList.acceptance">
            <el-table-column label="结题验收">
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
              <el-table-column prop="rank" label="角色排名系数" width></el-table-column>
              <el-table-column prop="level" label="级别系数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('acceptance',[{'name':'角色排名指数','value':'rank'},{'name':'级别系数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="活动参展录入" :visible.sync="isActivityInput">
      <el-form :model="InputForm">
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('activity')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="机库讲解录入" :visible.sync="isHangarInput">
      <el-form :model="InputForm">
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('hangar')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="视觉设计录入" :visible.sync="isVisualDesignInput">
      <el-form :model="InputForm">
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('visual_design')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="综合服务录入" :visible.sync="isServiceInput">
      <el-form :model="InputForm">
        <el-form-item label="综合评价得分" :label-width="formLabelWidth">
          <el-input v-model="InputForm.overall" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作强度" :label-width="formLabelWidth">
          <el-input v-model="InputForm.intensity" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('service')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="论文录入" :visible.sync="isPaperInput">
      <el-form :model="InputForm">
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分区指数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.partition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('paper')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="专利软著录入" :visible.sync="isPatentInput">
      <el-form :model="InputForm">
        <el-form-item label="角色排名" :label-width="formLabelWidth">
          <el-input v-model="InputForm.rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('patent')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="奖项录入" :visible.sync="isAwardInput">
      <el-form :model="InputForm">
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('award')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="结题验收录入" :visible.sync="isAcceptanceInput">
      <el-form :model="InputForm">
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('acceptance')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="录入公共服务" :visible.sync="dialogFormVisible1">
      <el-form :model="diagForm1">
        <div>活动参展</div>
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.activity[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.activity[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <div>个人几率讲解</div>
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.hangar[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.hangar[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <div>个人视觉设计</div>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.visual_design[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.visual_design[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <div>综合服务</div>
        <el-form-item label="综合评价得分" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.service[0].overall" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作强度" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.service[0].intensity" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addServiceFn()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="录入科研成果" :visible.sync="dialogFormVisible2">
      <el-form :model="diagForm2">
        <div>论文</div>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.paper[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.paper[0].rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分区指数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.paper[0].partition" autocomplete="off"></el-input>
        </el-form-item>
        <div>专利、软著</div>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.patent[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.patent[0].rank" autocomplete="off"></el-input>
        </el-form-item>
        <div>奖项</div>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.award[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.award[0].rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="级别指数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.award[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <div>结题验收</div>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.acceptance[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.acceptance[0].rank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="级别指数" :label-width="formLabelWidth">
          <el-input v-model="diagForm2.acceptance[0].level" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addResearchFn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getUserInfo,
    addService,
    addResearch,
    getService,
    getResearch
  } from "@/api/api";
  import {addPersonalInput, getUserIndex} from "../../api/api";

  export default {
    components: {},
    data() {
      return {
        user_id: null,
        form: {},
        personalList: [],
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        isInput: false,
        isActivityInput: false,
        isHangarInput: false,
        isVisualDesignInput: false,
        isServiceInput: false,
        isPaperInput: false,
        isPatentInput: false,
        isAwardInput: false,
        isAcceptanceInput: false,

        serviceList: {
          activity: [],
          activity_num: 0,
          hangar: [],
          hangar_num: 0,
          service: [],
          service_num: 0,
          visual_design: [],
          visual_design_num: 0
        },
        researchList: {
          acceptance: [],
          acceptance_num: 0,
          award: [],
          award_num: 0,
          paper: [],
          paper_num: 0,
          patent: [],
          patent_num: 0
        },
        InputForm: {
          rank: 0,
          level: 0,
          topic: null,
          overall: null,
          intensity: null,
          partition: null
        },
        diagForm1: {
          user_id: 1,
          activity: [
            {
              level: 1,
              total_people: 5
            }
          ],
          hangar: [
            {
              level: 1,
              total_people: 5
            }
          ],
          visual_design: [
            {
              level: 1,
              total_people: 5
            }
          ],
          service: [
            {
              overall: 1,
              intensity: 5
            }
          ]
        },
        diagForm2: {
          user_id: null,
          paper: [
            {
              rank: 1,
              partition: 2,
              total_people: 3
            }
          ],
          patent: [
            {
              rank: 1,
              total_people: 3
            }
          ],
          award: [
            {
              rank: 1,
              level: 2,
              total_people: 3
            }
          ],
          acceptance: [
            {
              rank: 1,
              level: 2,
              total_people: 3
            }
          ]
        },
        formLabelWidth: "120px"
      };
    },
    created() {
      this.getUserInfoFn();
      this.getUserIndexFn();
    },
    mounted() {
    },
    watch: {},
    methods: {
      diagInputShow(name, keys) {
        switch (name) {
          case 'activity': {
            this.isActivityInput = true;
            break;
          }
          case 'hangar': {
            this.isHangarInput = true;
            break;
          }
          case 'visual_design': {
            this.isVisualDesignInput = true;
            break;
          }
          case 'service': {
            this.isServiceInput = true;
            break;
          }
          case 'paper': {
            this.isPaperInput = true;
            break;
          }
          case 'patent': {
            this.isPatentInput = true;
            break;
          }
          case 'award': {
            this.isAwardInput = true;
            break;
          }
          case 'acceptance': {
            this.isAcceptanceInput = true;
            break;
          }
        }
        console.log(name)
        console.log(keys)
        this.isInput = true
      },
      addInputFn(name) {
        switch (name) {
          case 'activity': {
            let data = addPersonalInput({
              topic: 'activity',
              data: {
                level: this.InputForm.level,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isActivityInput = false;
            break;
          }
          case 'hangar': {
            let data = addPersonalInput({
              topic: 'hangar',
              data: {
                level: this.InputForm.level,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isHangarInput = false;
            break;
          }
          case 'visual_design': {
            let data = addPersonalInput({
              topic: 'visual_design',
              data: {
                level: this.InputForm.level,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isVisualDesignInput = false;
            break;
          }
          case 'service': {
            let data = addPersonalInput({
              topic: 'service',
              data: {
                level: this.InputForm.overall,
                total_people: this.InputForm.intensity,
              }
            })
            console.log(data)
            this.isServiceInput = false;
            break;
          }
          case 'paper': {
            let data = addPersonalInput({
              topic: 'paper',
              data: {
                rank: this.InputForm.rank,
                partition: this.InputForm.partition,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isPaperInput = false;
            break;
          }
          case 'patent': {
            let data = addPersonalInput({
              topic: 'patent',
              data: {
                rank: this.InputForm.rank,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isPatentInput = false;
            break;
          }
          case 'award': {
            let data = addPersonalInput({
              topic: 'award',
              data: {
                rank: this.InputForm.rank,
                level: this.InputForm.level,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isAwardInput = false;
            break;
          }
          case 'acceptance': {
            let data = addPersonalInput({
              topic: 'acceptance',
              data: {
                rank: this.InputForm.rank,
                level: this.InputForm.level,
                total_people: this.InputForm.total_people,
              }
            })
            console.log(data)
            this.isAcceptanceInput = false;
            break;
          }
        }
      },
      async getUserInfoFn() {
        var data = await getUserInfo();
        console.log(data.data);
        if (data.data.code == 200) {
          this.user_id = data.data.data.id;
        }
      },
      async getUserIndexFn() {
        var data = await getUserIndex();
        console.log(data.data);
        if (data.data.code === 200) {
          this.personalList = data.data.data.personal
          this.serviceList.activity = JSON.parse(this.personalList.service.activity)
          this.serviceList.hangar = JSON.parse(this.personalList.service.hangar)
          this.serviceList.service = JSON.parse(this.personalList.service.service)
          this.serviceList.visual_design = JSON.parse(this.personalList.service.visual_design)
          console.log(this.serviceList)
          this.researchList.paper = JSON.parse(this.personalList.research.paper)
          this.researchList.patent = JSON.parse(this.personalList.research.patent)
          this.researchList.award = JSON.parse(this.personalList.research.award)
          this.researchList.acceptance = JSON.parse(this.personalList.research.acceptance)
          console.log(this.researchList)
        }
      },
      diag1Show(type) {
        this.dialogFormVisible1 = true;
        if (type == 1) {
          this.getServiceFn();
        }
      },
      diag2Show(type) {
        this.dialogFormVisible2 = true;
        if (type == 1) {
          this.getResearchFn();
        }
      },
      async getServiceFn() {
        var params = {
          user_id: this.user_id
        };
        var data = await getService(params);
        if (data.data.code == 200) {
          this.diagForm1["activity"] = JSON.parse(data.data.data.activity);
          this.diagForm1["hangar"] = JSON.parse(data.data.data.hangar);
          this.diagForm1["service"] = JSON.parse(data.data.data.service);
          this.diagForm1["visual_design"] = JSON.parse(data.data.data.visual_design);
        }
        console.log(data.data.data);
      },
      async addServiceFn() {
        this.diagForm1["user_id"] = this.user_id;
        var data = await addService(this.diagForm1);
        if (data.data.code == 200) {
          this.$message({
            type: "success",
            message: "录入成功"
          });
          this.dialogFormVisible1 = false;
        } else {
          this.$message.error("添加失败");
        }
      },

      async getResearchFn() {
        var params = {
          user_id: this.user_id
        };
        var data = await getResearch(params);
        if (data.data.code == 200) {

          this.diagForm2["acceptance"] = JSON.parse(data.data.data.acceptance);
          this.diagForm2["award"] = JSON.parse(data.data.data.award);
          this.diagForm2["paper"] = JSON.parse(data.data.data.paper);
          this.diagForm2["patent"] = JSON.parse(data.data.data.patent);
        }
        console.log(data.data.data);
      },
      async addResearchFn() {
        this.diagForm2["user_id"] = this.user_id;
        var data = await addResearch(this.diagForm2);
        if (data.data.code == 200) {
          this.$message({
            type: "success",
            message: "录入成功"
          });
          this.dialogFormVisible1 = false;
        } else {
          this.$message.error("添加失败");
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .top {
    font-size: 18px;
    padding: 10px;
  }

  .container {
    .grid-content {
      width: calc(100% - 10px);
      margin: auto;
      margin-top: 20px;
    }

    .el-card__body {
      padding: 5px;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
